<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>1</title>
		<style type="text/css">
			/* inline-flex 行内块元素 */
			/* flex 块级元素 */
			/* 一般不会对弹性容器设置高度，因为自适应 */
			/* 
			 CSS相关属性
				1、flex-wrap：对弹性容器设置，是否允许直接子标签换行
					nowrap : 默认，不允许换行
					wrap : 允许换行
					wrap-reverse
				2、justify-content：设置弹性子项目在主轴上的对齐方式，对弹性容器设置
					center : 水平居中
					flex-start : 从主轴开头进行排列
					flex-end : 从主轴结尾处进行排列
					space-between : 弹性子项目 中间 均分主轴上的空余空间
					space-around : 弹性子项目 两边 均分主轴上的空余空间
					space-evenly : 弹性子项目 所有空隙 均分主轴上的空余空间
				3、align-content：设置弹性子项目在侧轴上的对齐方式，对弹性容器设置
					注意：设置侧轴对齐方式，需要保证子项目会自动换行 也就是flex-wrap:wrap
					stretch : 默认。各行将会伸展以占用剩余的空间。
					center : 水平居中
					flex-start : 从主轴开头进行排列
					flex-end : 从主轴结尾处进行排列
					space-between : 弹性子项目 中间 均分主轴上的空余空间
					space-around : 弹性子项目 两边 均分主轴上的空余空间
					space-evenly : 弹性子项目 所有空隙 均分主轴上的空余空间
				4、align-items:设置弹性子项目之间的对齐方式
					stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
					baseline : 如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
					flex-end : 顶部对其
					flex-start : 尾部对齐
					center : 居中对齐
				5、flex-grow：用于设置或检索弹性盒子的扩展比率
					
				6、flex-direction : 设置主轴，默认为row，即水平
					主轴与侧轴
						主轴：水平方向，X方向（默认）
							row 水平向右 | row-reverse 向左
						侧轴：垂直方向，Y方向
							column 向下 | column-reverse 向上
				7、order:排序，可以为负数，越小的值越排前面
				8、auto:相当于当前留白区域的大小，margin：auto就是完美居中，外边距上下左右都是留白的距离值
				9、align-self
					auto：如果'align-self'的值为'auto'，则其计算值为元素的父元素的'align-items'值，如果其没有父元素，则计算值为'stretch'。
					flex-start：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界。
					flex-end：弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界。
					center：弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度）。
					baseline：如弹性盒子元素的行内轴与侧轴为同一条，则该值与'flex-start'等效。其它情况下，该值将参与基线对齐。
					stretch：如果指定侧轴大小的属性值为'auto'，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸
				10、flex-shrink : flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。
					子元素总和大小超过了父级元素大小的情况下，例如超过100px  那么设置 1 2 3.... 根据以上比例消化溢出的值，也就是由谁来砍掉自己的肉
				11、flex-basis : 设置盒子的初始大小
			 */
			#section{
				width: 800px;  /* 当不设置宽度时，自适应大小，并且加上wrap可以换行 */
				height: 300px;
				border: 1px solid #7FFF00;
				display: flex;
				/* flex-wrap: wrap; */
				margin: 0 auto;
				/* flex-direction: column-reverse; */
				/* justify-content: space-evenly; */
				/* align-content:space-evenly; */
				/* align-items: baseline */
				align-content: stretch;
				
			}
			/* div{
				display: inline-flex;
			} */
			#section div{
				/* width: 200px; */
				/* height: 100px; */
				text-align: center;
				line-height: 300px;
			}
			#section div:nth-child(odd){
				background-color: #FF5500;
				height: 100px;
			}
			#section div:nth-child(even){
				background-color: #8a9aff;
				height: 200px;
			}
		</style>
	</head>
	<body>
		<!-- <div>1</div> -->
		<div id="section">
			<div style="flex-grow: 1;">1</div>
			<div style="flex-grow: 2;">2</div>
			<div style="flex-grow: 3;">3</div>
			<div style="flex-grow: 5;">4</div>
			<div style="flex-grow: 4;">5</div>
		</div>
		<!-- <div>
			3
		</div> -->
	</body>
</html>
